<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-11 08:57:21
 * @LastEditTime: 2023-10-27 14:35:50
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="./assets/logo.png">
    <meta name="description" content="广州天势网络科技有限公司【官网】">
    <meta name="keywords" content="广州天势网络科技有限公司,软件开发,视频剪辑,技术服务">
    <title>广州天势网络科技有限公司【官网】</title>
    <link rel="stylesheet" href="./assets/css/global.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./assets/css/viewer.min.css">
    <script src="./js/viewer.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <!--路由导航-->
    <nav>
        <div class="nav">
            <div class="nd1">
                <a href="#home" class="nd2">
                    <div class="nd2">
                        <span class="ns1">广州天势</span>
                        <span class="ns2">|</span>
                        <span class="ns3">GZTS</span>
                    </div>
                </a>
                <div :class="showRouterList ? 'nd3' : 'nd5'">
                    <a href="#home" :class="path == '' || path == '#home' ? 'active' : ''">
                        <div class="ntag">首页</div>
                    </a>
                    <a href="#company" :class="path == '#company' ? 'active' : ''">
                        <div class="ntag">公司简介</div>
                    </a>
                    <a href="#videoClips" :class="path == '#videoClips' ? 'active' : ''">
                        <div class="ntag">视频剪辑</div>
                    </a>
                    <a href="#system" :class="path == '#system' ? 'active' : ''">
                        <div class="ntag">系统研发</div>
                    </a>
                    <a href="#qualifications" :class="path == '#qualifications' ? 'active' : ''">
                        <div class="ntag">相关资质</div>
                    </a>
                </div>
            </div>
            <div class="nd4">
                <a href="#contact" id="contactButton">
                    <button class="nb1">联系我们</button>
                </a>
                <img src="./assets/menu.png" id="menuButton" style="width: 30px; height: 30px"
                     @click="showRouterList = !showRouterList"/>
            </div>
        </div>
    </nav>


    <div style="height: inherit">
        <div class="home" id="home">
            <div id="swipercom">
                <div class="swiper-container" id="swiperIndex">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, i) in datasImage" :key="i"
                             style="position: relative">
                            <!-- <video autoplay :src="item.video" loop x5-playsinline playsinline webkit-playsinline></video> -->
                            <img :alt="item.decs + '图片'" :title="item.title + '图片'" :src="item.image"
                                 draggable="false"/>
                            <div class="videoText">
                                <div class="sd1">{{ item.title }}</div>
                                <div class="sd2">{{ item.decs }}</div>
                                <a href="#system">
                                    <button class="sd3">去查看</button>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <div class="alink">
                <div class="alinkItems">
                    <a href="#company" class="alinkItem">
                        <div class="alinkItem">
                            <svg t="1696840672639" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5941" width="32" height="32">
                                <path
                                        d="M813.056 979.712H217.344c-58.624 0-106.24-47.616-106.24-106.24V160.256c0-58.624 47.616-106.24 106.24-106.24h595.712c58.624 0 106.24 47.616 106.24 106.24v713.216c0 58.624-47.616 106.24-106.24 106.24zM217.344 115.456c-24.576 0-44.8 20.224-44.8 44.8v713.216c0 24.576 20.224 44.8 44.8 44.8h595.712c24.576 0 44.8-20.224 44.8-44.8V160.256c0-24.576-20.224-44.8-44.8-44.8H217.344z"
                                        fill="#9e7736" p-id="5942"></path>
                                <path
                                        d="M709.376 428.544c-11.264 0-22.272-4.352-30.72-12.544l-58.624-57.856c-0.512-0.512-1.28-1.024-2.304-1.024-0.768 0-1.536 0.256-2.304 1.024L562.176 412.16c-12.544 12.8-31.232 16.384-47.616 9.728-16.384-6.656-27.136-22.528-27.136-40.448V96.256c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72v242.176l23.296-23.552c12.032-12.288 28.416-19.2 45.568-19.2 17.152-0.256 33.536 6.4 45.824 18.688l28.416 27.904V91.136c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72v293.632c0 17.664-10.496 33.536-26.88 40.448-5.888 2.048-11.52 3.328-17.152 3.328zM721.152 569.344H281.344c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h439.808c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM590.592 696.064H281.344c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h309.248c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM485.632 822.784h-204.288c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h204.288c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z"
                                        fill="#9e7736" p-id="5943"></path>
                            </svg>
                            <div>公司简介</div>
                        </div>
                    </a>

                    <a href="#videoClips" class="alinkItem">
                        <div class="alinkItem">
                            <svg t="1696842215452" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1550" width="32" height="32">
                                <path
                                        d="M633.792 469.642l-1.051-0.795-153.019-95.888c-12.954-9.046-29.595-10.311-43.838-3.227-14.744 7.334-23.903 22.121-23.903 38.588v191.39c0 16.468 9.16 31.255 23.904 38.589 6.132 3.051 12.707 4.553 19.243 4.553 8.643 0 17.218-2.629 24.593-7.779l151.903-95.188 1.117-0.699 1.051-0.796c10.867-8.22 17.1-20.749 17.1-34.375s-6.233-26.154-17.1-34.373z m-161.811 99.474v-130.2l103.889 65.101-103.889 65.099z"
                                        p-id="1551" fill="#9e7736"></path>
                                <path
                                        d="M892 773.208h-58.792V283.755c0-51.26-41.703-92.964-92.964-92.964H250.792V132c0-16.569-13.431-30-30-30s-30 13.431-30 30v58.792H132c-16.569 0-30 13.431-30 30s13.431 30 30 30h58.792v489.453c0 51.261 41.704 92.964 92.964 92.964h489.453V892c0 16.568 13.432 30 30 30s30-13.432 30-30v-58.792H892c16.568 0 30-13.432 30-30s-13.432-30-30-30z m-608.245 0c-18.176 0-32.964-14.787-32.964-32.964V250.792h489.453c18.177 0 32.964 14.788 32.964 32.964v489.453H283.755z"
                                        p-id="1552" fill="#9e7736"></path>
                            </svg>
                            <div>视频剪辑</div>
                        </div>
                    </a>

                    <a href="#system" class="alinkItem">
                        <div class="alinkItem">
                            <svg t="1696840842393" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="8404" width="32" height="32">
                                <path
                                        d="M952.9344 771.8912v-2.304l-0.4608-1.28c-3.5328-15.36-14.8992-25.6-28.5184-25.6h-1.7408a27.3408 27.3408 0 0 1-27.4944-27.0848 35.072 35.072 0 0 1 2.304-9.9328 32.512 32.512 0 0 0-16.2304-41.3696l-39.0656-21.8112-2.6112-2.56h-3.2256a34.7648 34.7648 0 0 0-10.8032-1.8944 37.2224 37.2224 0 0 0-25.2928 10.24c-8.192 8.1408-18.8928 14.1824-22.9888 14.2336s-15.616-6.656-23.04-13.9776a35.84 35.84 0 0 0-25.6-10.24 38.7584 38.7584 0 0 0-12.4928 2.5088l-2.8672 0.9728-0.768 0.768-40.96 22.3232-1.3824 0.7168-0.9216 0.768a33.3824 33.3824 0 0 0-10.24 40.1408l0.3072 0.6656a30.208 30.208 0 0 1 2.9184 10.9568 27.3408 27.3408 0 0 1-27.2384 27.3408h-1.792c-14.08 0-25.088 10.24-28.3136 26.1632l-0.256 1.4848v2.2016a197.8368 197.8368 0 0 0-3.2768 31.5904 201.3696 201.3696 0 0 0 3.4304 31.0784l0.3072 2.7136 0.4096 1.3312c3.4816 15.36 14.8992 25.6 28.5184 25.6h0.9216a27.3408 27.3408 0 0 1 27.4944 27.136 36.7616 36.7616 0 0 1-2.3552 10.24 34.6112 34.6112 0 0 0 13.4144 41.3696l40.4992 22.2208 2.6624 1.2288a37.888 37.888 0 0 0 12.8 2.5088 34.2528 34.2528 0 0 0 25.1392-10.24l1.3824-1.1776c10.752-9.3184 18.3296-14.0288 22.528-14.0288 2.2016 0 10.752 2.7648 23.808 15.7184a35.5328 35.5328 0 0 0 41.8304 6.144l41.728-23.1936 1.4848-0.9728a33.5872 33.5872 0 0 0 11.7248-39.1168v-0.3584l-0.3072-0.7168-0.9728-2.3552a19.3024 19.3024 0 0 1-1.6384-7.9872v-1.8432a27.2896 27.2896 0 0 1 27.2896-27.2896h1.7408c14.336 0 25.6-10.7008 28.5184-27.0336l0.3584-2.3552a195.7376 195.7376 0 0 0 3.2768-31.8464 198.8608 198.8608 0 0 0-3.9424-31.7952z m-48.2304 47.6672a76.4928 76.4928 0 0 0-38.8096 22.2208 75.264 75.264 0 0 0-20.48 52.3264 71.0144 71.0144 0 0 0 2.2016 16.4864l-18.9952 10.24a76.288 76.288 0 0 0-10.5984-7.0656 64.2048 64.2048 0 0 0-83.456 0.4096 89.1904 89.1904 0 0 0-8.4992 6.5024l-17.664-9.3184a68.1984 68.1984 0 0 0 2.0992-16.7936 75.52 75.52 0 0 0-59.7504-74.0352 145.3056 145.3056 0 0 1-1.28-14.8992 145.408 145.408 0 0 1 1.1264-14.8992 76.032 76.032 0 0 0 38.4512-22.1696 75.008 75.008 0 0 0 20.48-52.2752 68.5568 68.5568 0 0 0-2.2016-16.64l20.1728-11.264a83.712 83.712 0 0 0 8.5504 6.5024l0.7168 0.4608c15.7696 10.24 28.5696 14.4896 41.4208 14.4384a74.3936 74.3936 0 0 0 40.96-15.0016h0.256c2.7136-1.8432 5.4272-3.84 8.0896-5.9904l19.0976 10.5472a68.608 68.608 0 0 0-2.2016 16.64 75.6224 75.6224 0 0 0 59.8016 74.0352 130.6624 130.6624 0 0 1 1.2288 14.8992c0.0512 4.9152-0.3072 10.3424-0.7168 14.6432z"
                                        fill="#9e7736" p-id="8405"></path>
                                <path
                                        d="M776.8064 734.3616a71.2192 71.2192 0 1 0 50.176 20.48 70.5536 70.5536 0 0 0-50.176-20.48z m0.4096 92.928a22.0672 22.0672 0 1 1 22.0672-22.1184 22.1696 22.1696 0 0 1-22.0672 22.1184z"
                                        fill="#9e7736" p-id="8406"></path>
                                <path
                                        d="M518.144 892.5696l-373.1968 1.536a7.6288 7.6288 0 0 1-7.7312-7.424L134.0928 128a7.5776 7.5776 0 0 1 7.68-7.4752L828.16 117.76a7.5776 7.5776 0 0 1 7.7312 7.3728l1.6384 401.4592a33.28 33.28 0 0 0 66.56-0.3072l-1.6384-401.408A74.24 74.24 0 0 0 827.904 51.2l-686.4384 2.816a74.24 74.24 0 0 0-73.9328 74.3424l3.1232 758.5792a74.1888 74.1888 0 0 0 74.5472 73.728l373.1968-1.536a33.28 33.28 0 1 0 0-66.56z"
                                        fill="#9e7736" p-id="8407"></path>
                                <path
                                        d="M232.8064 466.8416L496.64 465.92a76.8 76.8 0 0 0 138.24-0.5632l69.1712-0.3072a33.28 33.28 0 0 0-0.3072-66.56h-69.1712A76.8 76.8 0 0 0 496.64 399.36l-263.8336 1.0752a33.28 33.28 0 0 0 0 66.56z m332.8-60.2624a25.6 25.6 0 1 1-25.6 25.6 25.6 25.6 0 0 1 25.5488-25.6zM233.5744 643.584l140.8512-0.5632a76.8 76.8 0 0 0 138.24-0.7168h3.0208l189.0304-0.768a33.3312 33.3312 0 0 0 0-66.56l-189.0816 0.8192a28.8256 28.8256 0 0 0-2.9696 0 76.8 76.8 0 0 0-138.24 0.4096l-140.9024 0.5632a33.3312 33.3312 0 0 0 0.3072 66.56z m209.92-59.7504a25.6 25.6 0 1 1-25.6 25.6 25.6 25.6 0 0 1 25.4464-25.7536zM301.2608 289.8432a76.8 76.8 0 0 0 138.24-0.5632l263.7824-1.0752a33.3312 33.3312 0 1 0-0.256-66.56l-263.7824 1.0752a76.8 76.8 0 0 0-138.24 0.6144H231.8336a33.3312 33.3312 0 1 0 0 66.56zM370.176 230.656a25.6 25.6 0 1 1-25.6 25.6 25.6 25.6 0 0 1 25.6-25.6z"
                                        fill="#9e7736" p-id="8408"></path>
                            </svg>
                            <div>系统研发</div>
                        </div>
                    </a>

                    <a href="#qualifications" class="alinkItem">
                        <div class="alinkItem">
                            <svg t="1696840929668" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="10496" width="32" height="32">
                                <path
                                        d="M447.829333 754.176 447.829333 695.978667 224.938667 695.978667 224.938667 754.176Z"
                                        p-id="10497" fill="#9e7736"></path>
                                <path
                                        d="M447.829333 593.237333 447.829333 535.210667 224.938667 535.210667 224.938667 593.237333Z"
                                        p-id="10498" fill="#9e7736"></path>
                                <path
                                        d="M961.194667 900.266667c3.242667-4.096 3.584-9.728 1.365333-14.336l-101.034667-188.416c10.922667-24.405333 16.896-49.322667 16.896-76.117333 0.512-102.229333-82.090667-185.344-184.490667-185.685333-0.341333 0-0.512 0-0.853333 0-101.888 0-184.661333 82.432-184.832 184.32-0.170667 25.770667 5.290667 51.370667 16.213333 75.946667l0.853333 1.877333-102.912 186.197333c-2.389333 4.437333-2.218667 10.24 1.024 14.336 3.072 4.096 8.362667 5.973333 13.312 4.949333l89.941333-20.309333 30.549333 85.845333c1.706667 4.778667 5.973333 8.192 11.093333 8.704 0.341333 0 0.512 0 0.853333 0l0.170667 0c5.12 0 9.557333-2.56 11.776-6.826667l90.453333-167.082667c16.042667 1.706667 25.258667 1.877333 40.618667 0.341333l90.965333 167.594667c2.218667 4.266667 6.656 6.826667 11.434667 6.826667 0 0 0 0 0.170667 0l0.512 0 0.170667 0 0.512 0c5.12-0.512 9.557333-3.754667 11.434667-8.704l30.890667-85.504 89.770667 20.821333C953.002667 906.24 958.122667 904.362667 961.194667 900.266667L961.194667 900.266667zM567.978667 871.424 567.978667 871.424l-13.824-38.912c-0.853333-2.218667-3.072-3.413333-5.290667-2.901333l-40.96 9.216 52.565333-94.378667c18.261333 18.602667 32.768 27.136 55.466667 39.594667L567.978667 871.424zM692.394667 744.96 692.394667 744.96c-68.778667-0.341333-124.586667-56.661333-124.245333-125.44 0.170667-68.608 55.978667-124.245333 124.757333-124.245333 0.170667 0 0.512 0 0.512 0 68.778667 0.341333 124.586667 56.32 124.245333 125.269333S761.344 744.96 692.394667 744.96zM839.68 842.752 839.68 842.752c-3.072-0.682667-5.973333 1.024-7.168 3.925333l-15.872 44.373333-54.954667-101.034667c25.941333-14.336 43.178667-24.576 64.341333-45.738667l60.245333 109.056L839.68 842.752 839.68 842.752z"
                                        p-id="10499" fill="#9e7736"></path>
                                <path
                                        d="M224.938667 213.504 224.938667 271.701333 682.496 271.701333 682.496 213.504Z"
                                        p-id="10500" fill="#9e7736"></path>
                                <path
                                        d="M815.104 52.736l-689.493333 0c-34.304 0-62.122667 28.842667-62.122667 64.170667l0 733.696c0 35.498667 27.989333 64.170667 62.122667 64.170667l245.76 0 0-58.026667L121.514667 856.746667 121.514667 110.592 819.2 110.592l0 280.576 58.026667 0L877.226667 116.906667C877.226667 81.408 849.237333 52.736 815.104 52.736L815.104 52.736z"
                                        p-id="10501" fill="#9e7736"></path>
                                <path
                                        d="M550.912 432.469333 550.912 374.272 224.938667 374.272 224.938667 432.469333Z"
                                        p-id="10502" fill="#9e7736"></path>
                            </svg>
                            <div>相关资质</div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="displayList" id="company">
            <div class="displayTitle">
                <span class="displayTitleEN">Company Profile</span>
                <span class="displayTitleZH">公司简介</span>
            </div>
            <div class="companyContain">
                <div class="companyContainLeft">
                    <img alt="公司介绍图片" title="公司图片" src="./assets/company1.png" onclick="prewImg('company')"
                         data-original="./assets/company1.png"/>
                </div>
                <div class="companyContainRight">
<!--                    <span class="companySpan1">{{ companyIntroduction.companyName }}</span>-->
                    <span class="companySpan2">
                            <div style="padding-bottom: 10px;" v-html="companyIntroduction.companyIntroduction"></div>
<!--                            <div style="color: black;font-weight: 600;padding-bottom: 5px;">公司业务:</div>-->
<!--                            <div v-html="companyIntroduction.corporateBusiness"></div>-->
                        </span>
<!--                    <span class="companySpan2" v-show="companyMore">-->
<!--                            <div style="color: black;font-weight: 600;padding-bottom: 5px;padding-top: 5px;">公司高层:</div>-->
<!--                            <div v-html="companyIntroduction.seniorManagementOfTheCompany"></div>-->
<!--                        </span>-->
<!--                    <button class="companyButton" @click="companyMore=!companyMore" v-show="!companyMore">查看更多-->
<!--                        >-->
<!--                    </button>-->
                </div>
            </div>
        </div>

            <div class="displayList" style="background: #f4f4f4" id="videoClips">
                <div class="displayTitle">
                    <span class="displayTitleEN">Video clips</span>
                    <span class="displayTitleZH">视频剪辑</span>
                </div>
                <div class="videoClipsContain">
                    <img src="./assets/leftRow.png" class="row leftRow" @click="getLeft('videoClips')">
                    <div v-for="(item, index) in videoClips.slice(0,3)" :key="index" :class="'videoClipsItem'+' '+'videoClipsItem'+index ">
                        <div class="videoClipsImage">
<!--                            <img :alt="item.decs + '图片'" :title="item.title + '图片'" :src="item.image"-->
<!--                                onclick="prewImg('videoClips')" :data-original="item.image" />-->
<!--                            <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" :poster="item.image"-->
<!--                                   data-setup="{}">-->
<!--                                <source :src="item.videoPath" type="video/mp4" />-->
<!--&lt;!&ndash;                                <p class="vjs-no-js">&ndash;&gt;-->
<!--&lt;!&ndash;                                    To view this video please enable JavaScript, and consider upgrading to a&ndash;&gt;-->
<!--&lt;!&ndash;                                    web browser that&ndash;&gt;-->
<!--&lt;!&ndash;                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>&ndash;&gt;-->
<!--&lt;!&ndash;                                </p>&ndash;&gt;-->
                            </video>
                                <video :src="item.videoPath" controls loop :poster="item.image">
<!--                                    <source :src="item.videoPath" type="video/mp4" />-->
<!--                                    Download the-->
<!--                                    <a :href="item.videoPath">MP4</a>-->
<!--                                    video.-->
                                </video>
<!--                            <video-->
<!--                                    id="my-video"-->
<!--                                    class="video-js"-->
<!--                                    controls-->
<!--                                    preload="auto"-->
<!--                                    width="640"-->
<!--                                    height="264"-->
<!--                                    :poster="item.image"-->
<!--                                    data-setup="{}"-->
<!--                            >-->
<!--                                <source :src="item.videoPath" type="video/mp4" />-->
<!--                                <p class="vjs-no-js">-->
<!--                                    To view this video please enable JavaScript, and consider upgrading to a-->
<!--                                    web browser that-->
<!--                                    <a :href="item.videoPath" target="_blank"-->
<!--                                    >supports HTML5 video</a-->
<!--                                    >-->
<!--                                </p>-->
<!--                            </video>-->
                        </div>
                        <div class="videoClipsText1">{{ item.title }}</div>
                        <div class="videoClipsText2">{{ item.decs }}</div>
                        <button class="videoClipsButton">ㅡ></button>
                    </div>
                    <img src="./assets/rightRow.png" class="row rightRow" @click="getRight('videoClips')">
                </div>
            </div>

        <div class="displayList" id="system">
            <div class="displayTitle">
                <span class="displayTitleEN">system development</span>
                <span class="displayTitleZH">系统研发</span>
            </div>
            <div class="systemContain">
                <div class="sidenav">
                    <div class="tile" v-for="(item, index) in systemDevelop" :key="index" @click="displayData(index, item.sketch)">{{ item.sketch }}</div>
                </div>

<!--                    <div class="overlay" v-if="selectedItem.title">-->
<!--                        <h2>{{ selectedItem.title }}</h2>-->
<!--                        <p>{{ selectedItem.decs }}</p>-->
<!--                    </div>-->
<!--                    <img :src="selectedItem.image" alt="图片" v-show="selectedItem.title">-->
                <img src="./assets/leftRow.png" class="row leftRow2" @click="getLeft('system')">
                    <div class="systemItem2">
                        <div class="systemImage">
                            <img :alt="currentData.decs + '图片'" :title="currentData.title + '图片'"
                                 :src="currentData.image" onclick="prewImg('system')"
                                 :data-original="currentData.image"/>
                        </div>
                        <div class="image-text">
                            <p>{{ currentData.sketch }}-{{ currentData.title }}</p>
                            <p>{{ currentData.decs }}</p>
                        </div>
                        <!-- <div class="mask1"></div>
                        <div class="maskDiv">
                            <div class="systemText1">{{ currentData.sketch }}-{{ currentData.title }}</div>
                            <div class="systemText2">{{ currentData.decs }}</div>
                        </div> -->
                    </div>
                <img src="./assets/rightRow.png" class="row rightRow2" @click="getRight('system')">

<!--                <img src="./assets/leftRow.png" class="row" @click="getLeft('system')">-->
<!--                <div class="systemFlex1">-->
<!--                    <div class="systemItem" style="height: 50%">-->
<!--                        <div class="systemImage">-->
<!--                            <img :alt="systemDevelop[0].decs + '图片'" :title="systemDevelop[0].title + '图片'"-->
<!--                                 :src="systemDevelop[0].image" onclick="prewImg('system')"-->
<!--                                 :data-original="systemDevelop[0].image"/>-->
<!--                        </div>-->
<!--                        <div class="mask"></div>-->
<!--                        <div class="maskDiv">-->
<!--                            <div class="systemText1">{{ systemDevelop[0].sketch }}-{{ systemDevelop[0].title }}</div>-->
<!--                            <div class="systemText2">{{ systemDevelop[0].decs }}</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="systemItem" style="height: 50%">-->
<!--                        <div class="systemImage">-->
<!--                            <img :alt="systemDevelop[1].decs + '图片'" :title="systemDevelop[1].title + '图片'"-->
<!--                                 :src="systemDevelop[1].image" onclick="prewImg('system')"-->
<!--                                 :data-original="systemDevelop[1].image"/>-->
<!--                        </div>-->
<!--                        <div class="mask"></div>-->
<!--                        <div class="maskDiv">-->
<!--                            <div class="systemText1">{{ systemDevelop[1].sketch }}-{{ systemDevelop[1].title }}</div>-->
<!--                            <div class="systemText2">{{ systemDevelop[1].decs }}</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="systemItem2">-->
<!--                    <div class="systemImage">-->
<!--                        <img :alt="systemDevelop[2].decs + '图片'" :title="systemDevelop[2].title + '图片'"-->
<!--                             :src="systemDevelop[2].image" onclick="prewImg('system')"-->
<!--                             :data-original="systemDevelop[2].image"/>-->
<!--                    </div>-->
<!--                    <div class="mask1"></div>-->
<!--                    <div class="maskDiv">-->
<!--                        <div class="systemText1">{{ systemDevelop[2].sketch }}-{{ systemDevelop[2].title }}</div>-->
<!--                        <div class="systemText2">{{ systemDevelop[2].decs }}</div>-->
<!--                    </div>-->
<!--                </div>-->

<!--                <div class="systemFlex1">-->
<!--                    <div class="systemItem" style="flex: 2">-->
<!--                        <div class="systemImage">-->
<!--                            <img :alt="systemDevelop[3].decs + '图片'" :title="systemDevelop[3].title + '图片'"-->
<!--                                 onclick="prewImg('system')" :src="systemDevelop[3].image"-->
<!--                                 :data-original="systemDevelop[3].image"/>-->
<!--                        </div>-->
<!--                        <div class="mask"></div>-->
<!--                        <div class="maskDiv">-->
<!--                            <div class="systemText1">{{ systemDevelop[3].sketch }}-{{ systemDevelop[3].title }}</div>-->
<!--                            <div class="systemText2">{{ systemDevelop[3].decs }}</div>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="systemItem3">-->
<!--                        <div class="systemImage">-->
<!--                            <img :alt="systemDevelop[4].decs + '图片'" :title="systemDevelop[4].title + '图片'"-->
<!--                                 onclick="prewImg('system')" :src="systemDevelop[4].image"-->
<!--                                 :data-original="systemDevelop[4].image"/>-->
<!--                        </div>-->
<!--                        <div class="mask"></div>-->
<!--                        <div class="maskDiv">-->
<!--                            <div class="systemText1">{{ systemDevelop[4].sketch }}-{{ systemDevelop[4].title }}</div>-->
<!--                            <div class="systemText2">{{ systemDevelop[4].decs }}</div>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="systemFlex2">-->
<!--                        <div class="systemItem">-->
<!--                            <div class="mask2"></div>-->
<!--                        </div>-->
<!--                        <div class="systemFlex1">-->
<!--                            <div class="systemFlex1">-->
<!--                                <div class="systemItem">-->
<!--                                    <div class="mask3"></div>-->
<!--                                </div>-->
<!--                                <div class="systemItem">-->
<!--                                    <div class="mask1"></div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <img src="./assets/rightRow.png" class="row" @click="getRight('system')">-->


            </div>

<!--            <div class="system-wrapper">-->
<!--                <div class="sidenav">-->
<!--                    <a v-for="(item, index) in systemDevelop" :key="index" @click="selectItem(index)">{{ item.title }}</a>-->
<!--                </div>-->

<!--                <div class="content">-->
<!--                    <div class="overlay" v-if="selectedItem.title">-->
<!--                        <h2>{{ selectedItem.title }}</h2>-->
<!--                        <p>{{ selectedItem.decs }}</p>-->
<!--                    </div>-->
<!--                    <img :src="selectedItem.image" alt="图片" v-show="selectedItem.title">-->
<!--                </div>-->
<!--            </div>-->
        </div>

        <div class="displayList" style="background: #f4f4f4" id="qualifications">
            <div class="displayTitle">
                <span class="displayTitleEN">Related qualifications</span>
                <span class="displayTitleZH">相关资质</span>
            </div>
            <div class="qualificationsContain">
                <img src="./assets/leftRow.png" class="row leftRow" @click="getLeft('qualifications')">
                <div v-for="(item, index) in qualifications.slice(0,3)" :key="item.image" :class="'qualificationsItem' + ' ' + 'qualificationsItem' + index ">
                    <div class="qualificationsImage">
                        <img :alt="item.decs + '图片'" :title="item.title + '图片'" :src="item.image"
                             onclick="prewImg('qualifications')" :data-original="item.image"/>
                    </div>
                    <div class="qualificationsText1">{{ item.title }}</div>
                    <div class="qualificationsText2">{{ item.decs }}</div>
                </div>
                <img src="./assets/rightRow.png" class="row rightRow" @click="getRight('qualifications')">
            </div>
        </div>

        <div class="displayList" id="contact">
            <div class="displayTitle">
                <span class="displayTitleEN">Contact Us</span>
                <span class="displayTitleZH">联系我们</span>
            </div>
            <div class="qualificationsContain" style="width: 75%;">
                <div class="contactLeft">
                    <div class="contactLeftItem">
                            <span class="contactLeftItem">
                                <img src="./assets/address.png"/>
                                <span style="white-space: nowrap">地址 | ADDRESS</span>
                            </span>
                        <span style="flex:1;white-space: pre-wrap;">广州市-天河区-万科云B栋802室</span>
                    </div>
                    <div class="contactLeftItem">
                            <span class="contactLeftItem">
                                <img src="./assets/email.png"/>
                                <span>邮编 | ZIP</span></span>
                        <span style="flex:1;white-space: pre-wrap;">510000</span>
                    </div>
                    <div class="contactLeftItem">
                            <span class="contactLeftItem">
                                <img src="./assets/phone.png"/>
                                <span>电话 | PHONE</span>
                            </span>
                        <span style="flex:1;white-space: pre-wrap;"><a href="tel:13160884922">13160884922</a></span>
                    </div>
                </div>
                <div class="contactRight">
                    <div style=" display: flex;flex-direction: column;justify-content: center;align-items: center;">
                        <div>联系我们</div>
                        <img src="./assets/wx.png" style="width: 100px; height: 100px" onclick="prewImg('wx')"
                             data-original="./assets/wx.png"/>
                    </div>
                </div>
            </div>
        </div>


        <footer>
            <div class="fd1">
                <div>
                    <span class="fs1">GZTS</span>
                    <span class="fs2">&emsp;|&emsp;</span>
                    <span class="fs3">广州天势网络科技有限公司<span style="font-size: 18px;font-family: cursive;">&emsp;&copy;{{ new
                    Date().getFullYear() }}</span></span>
                </div>
                <div>
                    <span class="fs4">地址： 广州市-天河区-万科云B栋802室</span>
                </div>
            </div>

            <div class="fd2">
                <a href="https://beian.miit.gov.cn/" target="_blank">
                    粤ICP备20046564号
                </a>
                <a href="https://www.12377.cn/" target="_blank">
                    中央网信办(国家互联网信息办公室)违法和不良信息举报中心
                </a>
                <a href="https://12321.cn/" target="_blank">
                    12321网络不良与垃圾信息举报受理中心
                </a>
                <a href="https://jbts.mct.gov.cn/" target="_blank">
                    12318全国文化市场举报平台
                </a>
            </div>
        </footer>

    </div>

    <!-- <div id="loading-container" v-else>
        <div id="loading-spinner"></div>
    </div> -->

</div>


</body>

<script type="text/javascript">
    function prewImg(type) {
        // 初始化Viewer 
        let viewer = null
        switch (type) {
            case 'company':
                viewer = new Viewer(document.querySelector('.companyContainLeft'), {url: 'data-original'});
                viewer.view()
                break;
            case 'videoClips':
                viewer = new Viewer(document.querySelector('.videoClipsContain'), {url: 'data-original'});
                viewer.view()
                break;
            case 'system':
                viewer = new Viewer(document.querySelector('.systemContain'), {url: 'data-original'});
                viewer.view()
                break;
            case 'qualifications':
                viewer = new Viewer(document.querySelector('.qualificationsContain'), {url: 'data-original'});
                viewer.view()
                break;
            case 'wx':
                viewer = new Viewer(document.querySelector('.contactRight'), {url: 'data-original'});
                viewer.view()
                break;

        }
        // 监听自定义事件
        document.querySelector('.viewer-close').addEventListener('click', () => {
            viewer.destroy()
        });

    }


    var DOM = new Vue({
        el: '#app',
        data() {
            return {
                companyMore: false,
                showRouterList: true,
                path: window.location.hash,
                videoClips: [],
                systemDevelop:[],
                qualifications:[],
                datasVideo: [],
                datasImage:[],
                getAllBySketchProjects: [],
                currentIndex: 0,
                currentData: {},
                companyIntroduction: {},
                // selectedItem: { title: '技术架构', image: 'http://localhost:8886/uploads/b_webdata/8/8/467919979489001472/467919979447058432__systemDevelop3.png', decs: '基于javaEE体系，使用springboot+redis+elsearch+mysql+minio。JavaEE是sun公司推出的企业级应用程序版本。能够帮助我们开发和部署可移植、健壮、可伸缩且安全的服务器端Java应用程序...', videoPath: '', sketch: '房地产ERP', type: "systemDevelop" }
            };
        },
        mounted() {

            new Swiper("#swiperIndex", {
                //配置分页器内容
                loop: true, // 循环模式选项
                autoplay: {
                    delay: 10000,
                    disableOnInteraction: false,
                },
                speed: 300,
                autoplayDisableOnInteraction: false,
                pagination: {
                    el: ".swiper-pagination", //换页器与哪个标签关联
                    clickable: true, //分页器是否可以点击
                },
            });

            // 获取所有动画元素
            const animatedElements = document.querySelectorAll(".displayList");

            // 检查元素是否在视口范围内
            function isInViewport(element) {
                const rect = element.getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <=
                    (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <=
                    (window.innerWidth || document.documentElement.clientWidth)
                );
            }

            // 滚动事件处理
            function handleScroll() {
                animatedElements.forEach((element) => {
                    if (isInViewport(element)) {
                        if (element.querySelector(".companyContain")) {
                            element.querySelector(".companyContain").classList.add("animated-element");
                        }

                        if (element.querySelector(".videoClipsContain")) {
                            element.querySelector(".videoClipsContain").classList.add("animated-element");
                        }

                        if (element.querySelector(".systemContain")) {
                            element.querySelector(".systemContain").classList.add("animated-element");
                        }
                        if (element.querySelector(".qualificationsContain")) {
                            element.querySelector(".qualificationsContain").classList.add("animated-element");
                        }
                    }
                });
            }

            // 监听滚动事件
            window.addEventListener("scroll", handleScroll);
        },
        methods: {
            getInitData(){
                axios({
                url: 'http://localhost:8886/project',
                method: 'get'
                }).then(res => {
                    const webData=res.data
                    this.videoClips= webData.videoClips,
                    this.systemDevelop= webData.systemDevelop,
                    this.qualifications= webData.qualifications,
                    this.datasVideo= webData.datasVideo,
                    this.datasImage=webData.datasImage,
                    console.log(res.data)
                })
            },

            displayData(index, sketch) {
                // console.log(index)
                axios({
                    url: 'http://localhost:8886/project/' + sketch,
                    method: 'get'
                }).then(res => {
                    this.getAllBySketchProjects = res.data
                    this.currentIndex = 0
                    this.currentData = this.getAllBySketchProjects[this.currentIndex]
                    // console.log(this.currentData)
                })
            },

            getCompanyIntroduction() {
              axios({
                  url: 'http://localhost:8886/company',
                  method: 'get'
              }).then(res => {
                  this.companyIntroduction = res.data
                  console.log(this.companyIntroduction)
              })
            },

            getLeft(type) {
                switch (type) {
                    case 'videoClips':
                        let last1 = this.videoClips.pop();
                        this.videoClips.unshift(last1);
                        break;
                    case 'system':
                        this.currentIndex = (this.currentIndex - 1 + this.getAllBySketchProjects.length) % this.getAllBySketchProjects.length;
                        this.currentData = this.getAllBySketchProjects[this.currentIndex];
                        // let last2 = this.getAllBySketchProjects.pop();
                        // this.getAllBySketchProjects.unshift(last2);
                        break;
                    case 'qualifications':
                        let last3 = this.qualifications.pop();
                        this.qualifications.unshift(last3);
                        break;
                }
            },
            getRight(type) {
                switch (type) {
                    case 'videoClips':
                        let [first1, ...rest1] = this.videoClips;
                        this.videoClips = [...rest1, first1];
                        break;
                    case 'system':
                        this.currentIndex = (this.currentIndex + 1) % this.getAllBySketchProjects.length;
                        this.currentData = this.getAllBySketchProjects[this.currentIndex];
                        // let [first2, ...rest2] = this.getAllBySketchProjects;
                        // this.getAllBySketchProjects = [...rest2, first2];
                        break;
                    case 'qualifications':
                        let [first3, ...rest3] = this.qualifications;
                        this.qualifications = [...rest3, first3];
                        break;
                }
            }
        },
        // computed: {
        //     path() {
        //         console.log(window.location.hash)
        //         return window.location.hash;
        //     },
        // },
        created() {
            window.addEventListener('hashchange', () => {
                this.path = window.location.hash
            })
            this.getInitData()
            this.displayData(0, "房地产ERP")
            this.getCompanyIntroduction()
        }
    })
</script>

</html>